<template>
  <div class="padding">
    <!-- 推广按钮组件 -->
    <extension
      v-if="join_class_id !== ''"
      :share="fenxiang"
      :promotionMoney="curriculum.fenyong"
      :except="false"
      :state="positionStyle"
      :type_type="3"
      :is_id="join_class_id"
      :open="open"
      :curriculum_id="curriculum.curriculum_id"
    ></extension>
    <!-- 基本信息组件 -->
    <partcurriculum
      :curriculum="curriculum"
      :click_number="click_number"
    ></partcurriculum>
    <!-- <section class="line"></section> -->
    <section class="people">
      <div
        class="people-participant"
        v-if="list.list.length>0 && purchase !== 'yes'"
      >
        <div class="people-ing">{{list.list.length}}人在拼课，可直接参与</div>
        <div
          class="people-more"
          @click="moreMore"
        >查看更多<span class="iconfont icon-gengduo"></span></div>
      </div>
      <div class="a-scroll">
        <div>
          <div
            class="ovovov"
            :style="`height:${winHeight}px`"
            v-if="list.list.length>0 && purchase !== 'yes'"
          >
            <div class="lunbozizhi"  >
              <section class="lit-content-box">
                <div
                  class="listaaa"
                  v-for="(item,index) in list.list"
                  :key="index"
                  @click="gogo(item)"
                >
                  <span
                    class="avatar"
                    :style="`background-image:url(${item.cover})`"
                  ></span>
                  <span class="name">{{item.nick_name}}</span>
                  <div class="difference">
                    <div>
                      <p>只差<span style="color: #ff3e3e">{{item.surplus_people}}</span>人拼成</p>
                      <span style="display: inline;font-size:11px;"> 剩余{{item.timedate}}</span>
                    </div>
                  </div>
                  <div v-if="purchase == 'ing'">
                    <div class="gogo">{{item.is_ares === 'yes' ? '邀请好友': '去拼团' }}</div>
                  </div>
                  <div v-if="purchase == 'no'">
                    <div class="gogo">去拼团</div>
                  </div>
                  <!-- <div>
                    <div class="gogo">您已购买</div>
                  </div> -->
                </div>
              </section>
              <section
                class="lunbozizhi"
                id="copylist"
              >
                <div
                  class="listaaa"
                  v-for="(item,index) in copylist"
                  :key="index"
                  @click="gogo(item)"
                >
                  <span
                    class="avatar"
                    :style="`background-image:url(${item.cover})`"
                  ></span>
                  <span class="name">{{item.nick_name}}</span>
                  <div class="difference">
                    <div>
                      <p>只差<span style="color: #ff3e3e">{{item.surplus_people}}</span>人拼成</p>
                      <span style="display: inline;font-size:11px;"> 剩余{{item.timedate}}</span>
                    </div>
                  </div>
                  <div v-if="purchase == 'ing'">
                    <div class="gogo">{{item.is_ares === 'yes' ? '邀请好友': '去拼团' }}</div>
                  </div>
                  <div v-if="purchase == 'no'">
                    <div class="gogo">去拼团</div>
                  </div>
                  <div v-if="purchase == 'yes'">
                    <div class="gogo">您已购买</div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div
      v-if="list.list.length<=0 && purchase === 'no'"
      class="text-al"
    >
      <span>暂时无人拼课</span>
    </div>
    <div
      v-if="purchase === 'yes'"
      class="text-al"
    >
      <span>您已经购买过此课程</span>
    </div>
    <!-- <section class="line"></section> -->
    <teacher
      v-on:okTeacher="okTeacher"
      :teacherData="teacherData"
      v-if="teacherData !== ''"
    ></teacher>
    <!-- <section class="line"></section> -->
    <div class="info_tab_boxs">
      <div :class=" positionStyle === true ? 'pos sp_tab_select1' : 'sp_tab_select1'">
        <tab custom-bar-width="30px">
          <tab-item
            selected
            @on-item-click="tabIndex(1)"
          >课程介绍</tab-item>
          <tab-item @on-item-click="tabIndex(2)">课程列表</tab-item>
          <tab-item @on-item-click="tabIndex(3)">用户评价{{evaluate.count !== 0 ? evaluate.count : '' }}</tab-item>
        </tab>
      </div>
    </div>
    <div style="width:100%;height:44px;"></div>
    <div
      class="content"
      v-if="index === 1"
    >
      <div v-html="curriculum.introduction"></div>
      <div
        @click="opentanchuang"
        style="margin: 10px 0px; text-align: center; width: 100%; font-size: 14px; color: rgba(242, 153, 17, 1);"
      >购买须知</div>
    </div>
    <div
      class="content1"
      v-if="index === 2"
    >
      <courselist
        v-for="(item,index) in chapterArr"
        :key="index"
        :item="item"
        :index="index"
        v-on:listcallback="listcallback"
      ></courselist>
    </div>
    <div v-if="index === 3">
      <div v-if="evaluate.count > 0">
        <div class="count-fen">
          <div class="count-left">
            <div class="color-size">{{evaluate.fen.score}}分</div>
            <div class="star"><img :src="evaluate.fen.scoreImg"></div>
            <div>{{evaluate.fen.txt}}</div>
          </div>
          <div class="count-right">
            <div>
              <span>讲师专业</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree1 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>方法有效</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree2 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>逻辑清晰</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree3 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>声音画质</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree4 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>课程服务</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree5 / 5) * 100 +'%;'"></span>
              </span>
            </div>
          </div>
        </div>
        <evaluationlist
          v-for="(item,index) in evaluate.data"
          :key="index"
          :item="item"
        ></evaluationlist>
      </div>
      <div
        v-else
        class="none-one"
      >
        <no-assessment></no-assessment>
        <!-- <img src="https://o6wndwjxn.qnssl.com/%E7%BB%843@2x.png">
        <div>您的评价是我最大的支持~</div> -->
      </div>
    </div>
    <div
      class="button"
      v-if="purchase === 'no'"
    >
      <div>
        <section @click="buying">立刻学习¥{{curriculum.preferential_money}}</section>
      </div>
      <div>
        <section @click="buyitem('')">成为团长¥{{curriculum.assemble_money}}</section>
      </div>
    </div>
    <div
      class="button"
      v-else-if="purchase === 'ing'"
    >
      <div
        class="study"
        @click="marskStatus = true"
      >邀请好友来听课</div>
    </div>
    <div
      class="button"
      v-else
    >
      <div
        class="study"
        @click="study"
      >进入课程</div>
    </div>
    <div
      class="marsk-scroll"
      v-if="show"
    >
      <div class="marsk-title">
        正在拼单
      </div>
      <div
        ref="wrapper"
        class="scroll-contnet"
      >
        <section>
          <div
            class="marsk-list"
            v-for="(item,index) in list.list"
            :key="index"
            @click="gogo(item)"
          >
            <span :style="`background-image:url(${item.cover})`"></span>
            <span>
              {{item.nick_name}}<br>
              <p> 剩余{{item.timedate}}</p>
            </span>
            <span>还差{{item.surplus_people}}人</span>
            <div v-if="purchase == 'ing'">
              <div class="gogo">{{item.is_ares === 'yes' ? '邀请好友': '去拼团' }}</div>
            </div>
            <div v-if="purchase == 'no'">
              <div class="gogo">去拼团</div>
            </div>
            <div v-if="purchase == 'yes'">
              <div class="gogo">去拼团</div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div
      class="marsk"
      v-if="show"
      @click="moreMore"
    ></div>
    <presentation-course
      ref="gis"
      :curriculum="curriculum"
      v-on:giveCourse="giveCourse"
    ></presentation-course>
    <popup
      v-if="is_collection !== '' && curriculum_id !== ''&& teacherData !== ''"
      :is_collection="is_collection"
      :lecturer_id="teacherData.lecturer.lecturer_id "
      v-on:openPresentationCourse="openPresentationCourse"
      v-on:collectionCourse="collectionCourse"
      :curriculum_id="curriculum_id"
      ref="popup"
    ></popup>
    <div
      class="pay-marsk"
      v-if="payMas"
    ></div>
    <PurchaseInstructions ref="Instructions">
      <div slot="title">
        拼团须知
      </div>
      <div
        slot="content"
        class="ppp-sss"
      >
        <p>
          1、教师后台设定拼团课程，学生可在课程首页选择“成为团长”。
        </p>
        <p>2、其他学员可以在课程首页加入拼团。</p>
        <p>3、如拼团结束时，拼团人数未达到开课人数，拼团学员的课程付费将自动原路
          退还。</p>
        <p>4、拼团成功后，课程按计划定期更新，每节课可在教师开课后学习，也可免费
          回听</p>
        <p>5、拼团成功后，可登录微信服务号“知运”，点击“我的课程”——“已购课程”
          进入听课。</p>
        <p> 6、平台课程为虚拟内容服务，拼团成功后概不退款，敬请谅解。</p>
        <p>7、如果在使用过程中产生问题，可以点击“个人中心”——“在线客服”进行
          咨询。</p>
      </div>
    </PurchaseInstructions>
    <!-- @click="hide" -->
    <div
      @click="marskStatus = false"
      class="marskssss"
      :class="marskStatus === true ? 'showmarsksss' : '' "
    >
      <img src="https://o6wndwjxn.qnssl.com/%E5%88%86%E4%BA%AB%E9%81%AE%E7%85%A7.png" style="width:100%;height:100%">
    </div>
  </div>
  </div>
</template>

<script>
import {
  Tab,
  TabItem
} from 'vux'
import teacher from '@/components/public/teacher'
import Cookies from 'js-cookie'
import wxReady from '@/utils/wxReady'
import suctionTops from '@/utils/suctiontop'
import starRating from '@/utils/starrating'
import { classInfo, bookschapter, payment, byCurriculum, give, collectionOnclick } from '@/api/assemble'
import evaluationlist from '@/components/public/evaluationlist'
import { comments_show, books_list } from '@/api/coursedetails'
import { mapState } from 'vuex'
import BScroll from 'better-scroll'
import presentationCourse from '@/components/public/presentationcourse'
import partcurriculum from '@/components/partcurriculum/partcurriculum'
import courselist from '@/components/public/courselist'
import popup from '@/components/public/popup'
import extension from '@/components/public/extension'
import noAssessment from '@/components/public/noassessment'
import PurchaseInstructions from '@/components/public/PurchaseInstructions'
import wxPay from '@/utils/wxpay'
export default {
  data () {
    return {
      marskStatus: false,
      join_class_id: '', // 拼团Id
      open: '',
      stae: false,
      teacherData: '',
      fenxiang: '',
      payMas: false,
      curriculum_id: '',
      purchase: '',
      copylist: '',
      is_collection: '',
      hiddenss: false,
      winHeight: '',
      evaluate: '',
      totasts: false,
      positionStyle: false,
      staue: true,
      index: 1,
      chapterArr: [],
      curriculum: {},
      result: [],
      list: {
        list: []
      },
      click_number: '',
      maxtime: 86399,
      msg: '1234455666',
      show: false,
      i: 1
    }
  },
  watch: {
    show () {
      if (this.show) {
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.wrapper, {
            click: true,
            scrollY: true,
            tap: true,
            probeType: 3,
            pullUpLoad: {
              threshold: 0
            }
          })
        })
      }
    },
    curriculum () {
      this.$nextTick(() => {
        if (this.curriculum.title) {
          document.title = this.curriculum.title
        }
      })
    }
  },
  components: {
    PurchaseInstructions,
    teacher,
    extension,
    popup,
    Tab,
    TabItem,
    partcurriculum,
    courselist,
    presentationCourse,
    evaluationlist,
    noAssessment
  },
  created () {
    if (this.$route.query.cid) {
      // console.log(JSON.parse(this.$route.query.cid))
      this.fenxiang = JSON.parse(this.$route.query.cid)
      // console.log(this.fenxiang)
    }
    this.curriculum_id = this.$route.query.curriculum_id
    this.getDetails()
    this.getdetails()
    this.getchapterList()
    this.commentsShow()
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  methods: {
    opentanchuang () {
      this.$refs.Instructions.ava = true
      // this.$refs.PurchaseInstructions.ava = true
    },
    getdetails () {
      let obj = {
        curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
        user_id: this.user_id,
        type: 0
      }
      books_list(obj).then(res => {
        if (res.data.code === 200) {
          this.teacherData = res.data.data.lecturer_list
        } else {
          let _this = this
          this.$vux.alert.show({
            title: '提示',
            content: '此课程已经不在了，更换其它试一试',
            onHide () {
              _this.$router.go(-1)
            }
          })
        }
      })
    },
    // 老师
    okTeacher (state, nu) {
      if (state) {
        if (nu === 1) {
          this.teacherData.follow_count = this.teacherData.follow_count + 1
        } else {
          this.teacherData.follow_count = this.teacherData.follow_count - 1
        }
      }
    },
    // 跳转课程
    study () {
      if (this.chapterlist) {
        if (this.category == 1) { // 语音课程
          this.$router.push({
            path: '/co_audio',
            query: {
              curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
              chapter_id: this.chapterArr[0].chapter_id,
              status: 1
            }
          })
        } else if (this.category == 2) {
          this.$router.push({
            path: '/co_text',
            query: {
              curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
              chapter_id: this.chapterArr[0].chapter_id,
              status: 1
            }
          })
        } else if (this.category == 3) {
          this.$router.push({
            path: '/co_video',
            query: {
              curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
              chapter_id: this.chapterArr[0].chapter_id,
              status: 1
            }
          })
        }
      } else {
        alert('课程没有章节')
      }
    },
    // 收藏功能
    collectionCourse (res) {
      if (res) {
        this.getDetails()
      }
    },
    // 点击弹窗上的赠送
    giveCourse (num) {
      let obj = {
        number: num,
        user_id: this.user_id,
        curriculum_id: this.curriculum.curriculum_id,
        url_id: 0
      }
      this.payMas = true
      give(obj).then(res => {
        if (res.data.code === 200) {
          wxPay(res).then(data => {
            this.getDetails()
            this.payMas = false
            if (window.__wxjs_is_wkwebview !== true) {
              this.$router.push({
                path: '/give',
                query: {
                  num: num,
                  title: this.curriculum.title,
                  curriculum_id: this.curriculum.curriculum_id
                }
              })
            } else {
              window.location.href = `/give?num=${num}&curriculum_id=${this.curriculum.curriculum_id}&title=${this.curriculum.title}`
            }
          })
        }
      })
      //       console.log(this.curriculum)
      //       console.log(num)
    },
    // 课程评价
    commentsShow () {
      let obj = {
        curriculum_id: this.$route.query.curriculum_id
      }
      comments_show(obj).then(res => {
        if (res.data.code === 200) {
          res.data.data.data.forEach((element, i) => {
            element = Object.assign(element, starRating(element.score))
          })
          res.data.data.fen = Object.assign(res.data.data.fen, starRating(res.data.data.fen.score))
          this.evaluate = res.data.data
        }
      })
    },
    // 赠送课程弹窗
    openPresentationCourse () {
      this.$refs.gis.state = true
    },
    //  获取详情
    getDetails () {
      let obj = {
        join_class_id: this.$route.query.join_class_id ? this.$route.query.join_class_id : this.fenxiang.join_class_id,
        curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
        user_id: this.user_id
      }
      classInfo(obj).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        if (res.data.code === 200) {
          if (this.curriculum.class === null) {
            let _this = this
            this.$vux.alert.show({
              title: '提示',
              content: '此课程已经不在了，更换其它试一试',
              onHide () {
                _this.$router.go(-1)
              }
            })
          }
          this.category = res.data.data.category
          this.purchase = res.data.data.purchase
          this.curriculum = res.data.data.class
          this.join_class_id = res.data.data.class.join_class_id
          this.list = res.data.data.list
          this.copylist = res.data.data.list.list
          this.is_collection = res.data.data.is_collection
          this.click_number = res.data.data.click_number
          this.open = res.data.data.class.open
          if (this.curriculum === null) {
            let _this = this
            this.$vux.alert.show({
              title: '提示',
              content: '此课程已经不在了，更换其它试一试',
              onHide () {
                _this.$router.go(-1)
              }
            })
          }

          this.wxShare()
          this.list.list.forEach((element, index) => {
            element.staue = true
            let hour, minute, second, end, start, s
            if (new Date(element.end_time * 1000) - new Date() < 0) {
              element.staue = false
            } else {
              end = new Date(element.end_time * 1000) // 结束时间
              start = new Date() // 当前时间
              s = parseInt((end - start) / 1000) // 时间差
              hour = Math.floor(s / (60 * 60))
              minute = Math.floor(s / 60) - (hour * 60)
              second = Math.floor(s) - (hour * 60 * 60) - (minute * 60)
              if (hour <= 9) {
                hour = `0${hour}`
              }
              if (minute <= 9) {
                minute = `0${minute}`
              }
              if (second <= 9) {
                second = `0${second}`
              }
              this.$set(element, 'timedate', `${hour}:${minute}:${second}`)
              let terval = setInterval(() => {
                start = new Date() // 当前时间
                s = parseInt((end - start) / 1000) // 时间差
                if (s < 0) {
                  clearInterval(terval)
                  element.staue = false
                } else if (s > 0) {
                  hour = Math.floor(s / (60 * 60))
                  minute = Math.floor(s / 60) - (hour * 60)
                  second = Math.floor(s) - (hour * 60 * 60) - (minute * 60)
                  if (hour <= 9) {
                    hour = `0${hour}`
                  }
                  if (minute <= 9) {
                    minute = `0${minute}`
                  }
                  if (second <= 9) {
                    second = `0${second}`
                  }
                  this.$set(element, 'timedate', `${hour}:${minute}:${second}`)
                }
              }, 1000)
            }
          })
          this.$nextTick(() => {
            if (this.list.list.length > 0 && this.purchase !== 'yes') {
              if (this.list.list.length >= 3) {
                this.winHeight = document.querySelector('.listaaa').offsetHeight * 3
              }
              if (this.list.list.length < 3) {
                this.winHeight = document.querySelector('.listaaa').offsetHeight * this.list.list.length
              }
              let indexs = 1
              let scrollDom = document.querySelector('.lunbozizhi')
              let domn = document.querySelector('.lit-content-box')
              if (this.list.list.length > 3) {
                setInterval(() => {
                  indexs++
                  if (indexs > Math.abs(domn.offsetHeight)) {
                    scrollDom.style.top = 0 + 'px'
                    indexs = 1
                  } else {
                    scrollDom.style.top = -indexs + 'px'
                  }
                }, 100)
              }
            }
          })
        } else {
          let _this = this
          this.$vux.alert.show({
            title: '提示',
            content: '此课程已经不在了，更换其它试一试',
            onHide () {
              _this.$router.go(-1)
            }
          })
        }
      })
    },
    // 获取章节模块
    getchapterList () {
      let obj = {
        curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id
      }
      bookschapter(obj).then(res => {
        let { code, data } = res.data
        if (code === 200) {
          this.chapterArr = data
          this.chapterlist = true
        } else {
          this.chapterlist = false
        }
      })
    },
    // 点击试学
    listcallback (item, index) {
      if (this.category == 1) { // 语音
        this.$router.push({
          path: '/co_audio',
          query: {
            curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
            chapter_id: item.chapter_id,
            status: 2,
            c: index
          }
        })
      }
      if (this.category == 2) { // 图文
        this.$router.push({
          path: '/co_text',
          query: {
            curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
            chapter_id: item.chapter_id,
            status: 2,
            c: index
          }
        })
      }
      if (this.category == 3) { // 图文
        this.$router.push({
          path: '/co_video',
          query: {
            curriculum_id: this.$route.query.curriculum_id ? this.$route.query.curriculum_id : this.fenxiang.curriculum_id,
            chapter_id: item.chapter_id,
            status: 2,
            c: index
          }
        })
      }
    },
    gogo (item) {
      if (item.is_ares === 'yes') {
        this.marskStatus = true
        return false
      } else if (this.purchase === 'ing') {
        this.$vux.alert.show({
          title: '提示',
          content: '您已经开团，若开团失败才可参与其他拼团',
          onShow () {
            console.log('Plugin: I\'m showing')
          },
          onHide () {
            console.log('Plugin: I\'m hiding')
          }
        })
      } else if (this.purchase === 'no' && item.is_ares === 'no') {
        this.buyitem(item.assemble_id, 'add')
      }
    },
    // 切换tab
    tabIndex (index) {
      if (index !== this.index) {
        this.index = index
      }
    },
    // 显示更多
    moreMore () {
      this.show = !this.show
    },
    buyitem (assembleid, add) {
      this.payMas = true
      let config = {
        url_id: this.fenxiang && this.fenxiang.shareid !== undefined ? this.fenxiang.shareid : 0,
        join_class_id: this.curriculum.join_class_id,
        type: add || 'open',
        openid: Cookies.get('openid'),
        member_id: this.user_id,
        assemble_id: assembleid === '' ? 0 : assembleid
      }
      payment(config).then(res => {
        if (res.data.code === 200) {
          this.getDetails()
          this.payMas = false
          wxPay(res).then(data => {
            alert('支付成功')
            this.getDetails()
          }).catch((res) => {
            alert('支付失败')
            this.getDetails()
          })
        } else {
          alert(res.data.msg)
          this.getDetails()
        }
      })
      this.getDetails()
    },
    buying () {
      let config = {
        app_id: this.app_id,
        user_id: this.user_id,
        curriculum_id: this.curriculum.curriculum_id,
        url_id: this.fenxiang.shareid ? this.fenxiang.shareid : 0,
        type: 0
      }
      this.payMas = true
      byCurriculum(config).then(res => {
        this.payMas = false
        if (res.data.code === 200) {
          wxPay(res).then(data => {
            this.getDetails()
          })
        } else {
          this.getDetails()
          alert(res.data.msg)
        }
      })
    },
    wxShare () {
      let title = this.curriculum.title
      let desc = '了解更多知识，请关注“知运”公众号'
      wxReady(title, desc, 'assembledetails', this.curriculum.cover,
        `&join_class_id=${this.curriculum.join_class_id ? this.curriculum.join_class_id : this.fenxiang.join_class_id}&curriculum_id=${this.curriculum.curriculum_id ? this.curriculum.curriculum_id : this.fenxiang.curriculum_id}`
      ).then(() => {
        this.marsk = false
      })
    },
    suctiontop () {
      this.positionStyle = suctionTops('.info_tab_boxs')
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.wxShare()
      window.addEventListener('scroll', this.suctiontop)
    })
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.suctiontop)
  }
}
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  bottom: 0;
}
.marskssss {
  transition: all 0.3s;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 9900;
  opacity: 0;
  bottom: -1000px;
  // background: rgba(255, 255, 255, 0.9);
  p {
    font-size: 14px;
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
}
.showmarsksss {
  z-index: 9900;
  bottom: 0px;
  opacity: 1;
}
.modelshow {
  position: fixed;
  z-index: 100;
  width: 270px;
  height: 230px;
  background-color: #fff;
  border-radius: 4px;
  top: 0;
  left: 50%;
  padding: 15px;
  box-sizing: border-box;
  transform: translate(-50%, 0);
  .model-title {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #333333;
    text-align: center;
    line-height: 20px;
    width: 100%;
    text-align: center;
  }
  .model-tips {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    width: 100%;
    text-align: center;
    margin-top: 12px;
  }
  .model-avatar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    section {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid #da4131;
      margin: 20px;
    }
  }
  .model-btn {
    display: flex;
    section {
      width: 100px;
      height: 34px;
      line-height: 34px;
    }
    section:first-of-type {
      background: #e5e5e5;
      border-radius: 16px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #999999;
      text-align: center;
    }
    section:last-of-type {
      background: #da4131;
      border-radius: 16px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #fff;
      text-align: center;
    }
  }
}
.ppp-sss > p {
  width: 100%;
  line-height: 30px;
}
.pay-marsk {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
}
.study {
  width: 100%;
  height: 100%;
  background-color: #da4131;
  border-radius: 38px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}
.none-one {
  width: 100%;
  padding: 20px 5%;
}

.count-fen {
  width: 100%;
  height: 100px;
  padding: 0 5%;
  display: flex;
  box-sizing: border-box;
  margin: 10px 0px;

  .count-left {
    flex: 2;
    border-right: 1px solid #eeeeee;
    text-align: center;

    .color-size {
      font-size: 24px;
      color: #ff9300;
      margin-top: 6px;
    }

    .star {
      width: 100%;
      height: 15px;
      margin: 10px 0;

      img {
        width: 100%;
        height: 100%;
      }
    }

    div:last-of-type {
      font-size: 14px;
      color: #1a1a1a;
    }
  }

  .count-right {
    flex: 3;

    div {
      font-size: 12px;
      color: #999999;
      margin: 3px 0;
      display: flex;
      align-items: center;

      span:first-of-type {
        text-indent: 19px;
        margin-right: 20px;
      }

      .bar {
        position: relative;
        display: inline-block;
        width: 55%;
        height: 5px;
        background: #eeeeee;
        border-radius: 50px;
        overflow: hidden;

        span {
          display: inline-block;
          position: absolute;
          height: 100%;
          background: #ff9300;
          border-radius: 50px;
        }
      }
    }
  }
}

.evaluate {
  width: 100%;
  box-sizing: border-box;
  padding: 0 5%;
  margin: 10px 0px;
}

.pads {
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 6px;
}

.pads-top {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  position: relative;
}

.create-time {
  position: absolute;
  right: 0;
}

.pads-algin {
  width: 100%;
  height: 30px;
  margin: 10px 0px;
  display: flex;
  align-items: center;

  div {
    height: 30px;
    line-height: 30px;
    color: #ff9300;
    font-size: 12px;
  }

  img {
    width: 50%;
    height: 16px;
  }
}

.pad-bottom {
  font-size: 14px;
  color: #1a1a1a;
  padding-bottom: 10px;
}

.pads-bottom {
  font-size: 14px;
  color: #1a1a1a;
  padding-bottom: 10px;
  width: 100%;
}

/*评价*/
.st0 {
  fill: #666666;
}

.st1 {
  fill: #ff0000;
}

.boradi {
  width: 50px;
  height: 50px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 50%;
  margin-bottom: 17px;
}

.icons-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;

  div {
    flex: 1;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
  }
}

.close {
  width: 100%;
  height: 60px;
  border-top: solid 1px #c1c1c1;
  line-height: 60px;
  text-align: center;
  color: #1a1a1a;
  font-size: 17px;
  position: absolute;
  bottom: 0;
}

.fixed-icon {
  width: 45px;
  height: 45px;
  background-image: url("http://o6wndwjxn.qnssl.com/e7121201903051841447357.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: fixed;
  z-index: 100;
  right: 13px;
  top: 85%;
}

.openg {
  width: 100%;
  position: fixed;
  height: 587/2px;
  bottom: 0;
  z-index: 200;
  box-sizing: border-box;
  padding-top: 24px;
  background-color: #fff;
  border-radius: 20px 20px 0px 0px;
}

.big-openg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 101;
}

.ovovov {
  overflow-y: hidden;
  position: relative;
}

.lunbozizhi {
  width: 100%;
  position: absolute;
}

.line {
  width: 100%;
  height: 10px;
  background-color: #f5f5f5;
}

.sp_tab_select1 {
  width: 100%;
  z-index: 100;
  position: absolute;
}

.pos {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
}

.people {
  width: 100%;
  padding: 0px 15px;
  box-sizing: border-box;
  font-family: PingFangSC-Regular;

  .people-participant {
    width: 100%;
    height: 33px;
    display: flex;

    div {
      flex: 1;
      height: 100%;
      line-height: 33px;
      font-family: PingFangSC-Regular;
      border-bottom: solid 1px #f8f8f8;
    }

    div:first-of-type {
      font-size: 13px;
      color: #333333;
    }

    div:last-of-type {
      font-size: 13px;
      color: #999999;
      text-align: right;
    }
  }

  .a-scroll {
    width: 100%;
    // height: 195px;
    overflow: hidden;

    .listaaa {
      width: 100%;
      height: 65px;
      display: flex;
      align-items: center;
      border-bottom: solid 1px #f8f8f8;
      position: relative;

      span {
        display: inline-block;
      }

      .avatar {
        width: 41px;
        height: 41px;
        border-radius: 50%;
        overflow: hidden;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .name {
        margin-left: 10px;
        font-size: 13px;
        color: #333333;
      }

      .difference {
        position: absolute;
        right: 80px;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        height: 100%;
      }

      .gogo {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        width: 65px;
        height: 26px;
        border-radius: 26px;
        border: solid 1px #da4131;
        text-align: center;
        line-height: 25px;
        color: #fff;
        background: #da4131;
        top: 50%;
        margin-top: -13px;
      }
    }
  }
}

.content {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 5% 0px 5%;
}

.content1 {
  width: 100%;
}

.button {
  width: 100%;
  height: 55px;
  position: fixed;
  bottom: 0;
  padding: 8px 15px;
  background-color: #fff;
  display: flex;
  z-index: 100;

  div {
    flex: 1;

    section {
      width: 95%;
      height: 39px;
      border-radius: 38px;
      border: solid 1px #da4131;
      text-align: center;
      line-height: 39px;
      font-size: 15px;
      background-color: #fff;
    }
  }

  div:first-of-type {
    section {
      color: #da4131;
    }
  }

  div:last-of-type {
    section {
      background-color: #da4131;
      margin-left: 5%;
      color: #fff;
    }
  }
}

.padding {
  padding-bottom: 55px;
}

.info_tab_boxs {
  position: relative;
}

.s {
  animation: 10s rowup linear infinite normal;
  position: relative;
}

@keyframes rowup {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, -195px, 0);
  }
}

.marsk {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
}

.marsk-scroll {
  width: 78%;
  padding: 0 12px;
  box-sizing: border-box;
  height: 300px;
  position: fixed;
  z-index: 200;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 6px;
  font-family: PingFangSC-Regular;

  .marsk-title {
    width: 100%;
    height: 45px;
    border-bottom: solid 1px #f8f8f8;
    text-align: center;
    line-height: 45px;
    font-size: 15px;
  }

  .scroll-contnet {
    height: 220px;
    width: 100%;
    overflow: hidden;
  }

  .marsk-list {
    width: 100%;
    display: flex;
    height: 40px;
    margin-top: 10px;
    align-items: center;
    position: relative;

    span {
      display: inline-block;
    }

    span:first-of-type {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 8px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    span:nth-of-type(2) {
      font-size: 15px;
      color: #333333;

      p {
        font-size: 12px;
        color: #4f4f4f;
      }
    }

    span:nth-of-type(3) {
      font-size: 13px;
      color: #da4131;
      position: absolute;
      right: 62px;
      height: 100%;
      top: 50%;
      transform: translate(0, -25%);
    }

    div {
      width: 50px;
      height: 20px;
      background-color: #da4131;
      border-radius: 22px;
      font-size: 10px;
      color: #fff;
      text-align: center;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
    }
  }
}

.text-al {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: #999;
  height: 60px;
  line-height: 60px;
}

.icon-gengduo {
  font-size: 13px;
}

.people-ing {
  font-weight: 900;
}
</style>
